<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速上手 | d2-crud-plus</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/d2-crud-plus/icon-only.png">
    <link rel="manifest" href="/d2-crud-plus/manifest.json">
    <link rel="apple-touch-icon" href="/d2-crud-plus/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="/d2-crud-plus/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="description" content="d2-crud-plus doc">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/d2-crud-plus/assets/css/0.styles.04fdeb33.css" as="style"><link rel="preload" href="/d2-crud-plus/assets/js/app.cf559687.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/2.40e3d83c.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/7.20165752.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/94.bfb96693.js" as="script"><link rel="prefetch" href="/d2-crud-plus/assets/js/10.df64ceb4.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/100.1b960036.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/101.0e6b7c65.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/102.60335619.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/11.d9cc7359.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/12.1fe853d9.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/13.beccd8a2.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/14.a22b7450.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/15.bfbc8e57.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/16.829da345.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/17.320c2a84.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/18.1ae2555c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/19.dd1cfb7c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/20.9f88070e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/21.b4e311e8.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/22.508bfd88.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/23.d99910ba.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/24.3aac1d86.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/25.7f84d66c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/26.010188d3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/27.7ffcde1a.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/28.e5718534.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/29.a664aead.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/3.020e8c98.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/30.b5af54a5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/31.3ce7cf81.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/32.74db3cbf.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/33.4afafef0.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/34.802ed380.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/35.829671b1.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/36.d62ff643.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/37.56355919.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/38.ef3567a6.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/39.f5bd440b.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/4.c9f444e5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/40.097677b2.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/41.a1bdd4d7.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/42.d7c95839.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/43.ff1defe3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/44.d08c49cd.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/45.15500c6e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/46.49432e0a.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/47.4c86a170.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/48.9fb26f3b.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/49.2f1d3b4c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/5.0c166f17.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/50.8adcf1fc.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/51.9debc188.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/52.b337fe05.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/53.1b4c4595.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/54.60ad5592.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/55.1ead7a60.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/56.4b4068b5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/57.39b9a334.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/58.e342a69f.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/59.9286ee5c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/6.dc3cf8b6.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/60.fca56e66.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/61.e53daf76.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/62.afa730c3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/63.515344c7.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/64.5ea21d7e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/65.5736928f.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/66.354c4f97.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/67.e458985d.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/68.9cf2e48e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/69.afff9087.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/70.5f510366.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/71.08e285c9.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/72.fbdbf96d.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/73.4c7255c5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/74.dbca5940.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/75.3cdd0828.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/76.cdad6b31.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/77.f79386ae.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/78.885784bf.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/79.90e30120.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/8.ce580690.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/80.2b6522e0.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/81.ab19ef97.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/82.cb46f8f4.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/83.67a48600.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/84.224a00c3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/85.e4002b19.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/86.e1acfe7c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/87.263718a8.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/88.4548fddc.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/89.dcd81e26.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/9.18394d2c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/90.70193895.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/91.60784f38.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/92.82037907.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/93.f7bbaf29.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/95.27670bd5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/96.068d6ad1.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/97.d82da56e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/98.20649291.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/99.74bab3f4.js">
    <link rel="stylesheet" href="/d2-crud-plus/assets/css/0.styles.04fdeb33.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/d2-crud-plus/" class="home-link router-link-active"><!----> <span class="site-name">d2-crud-plus</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/d2-crud-plus/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="更多" class="mobile-dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          核心
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/d2-crud-x/" class="nav-link">
  D2-CRUD-X
</a></li></ul></li><li class="dropdown-item"><h4>
          周边项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee镜像
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          附加
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/permission.html" class="nav-link">
  权限管理
</a></li><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/generate.html" class="nav-link">
  代码生成
</a></li></ul></li><li class="dropdown-item"><h4>
          衍生项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://cloud.battcn.com/#/index" target="_blank" rel="noopener noreferrer" class="nav-link external">
  后台获取配置的CRUD
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          友情链接
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github加速工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/d2-crud-plus/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="更多" class="mobile-dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          核心
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/d2-crud-x/" class="nav-link">
  D2-CRUD-X
</a></li></ul></li><li class="dropdown-item"><h4>
          周边项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee镜像
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          附加
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/permission.html" class="nav-link">
  权限管理
</a></li><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/generate.html" class="nav-link">
  代码生成
</a></li></ul></li><li class="dropdown-item"><h4>
          衍生项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://cloud.battcn.com/#/index" target="_blank" rel="noopener noreferrer" class="nav-link external">
  后台获取配置的CRUD
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          友情链接
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github加速工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div style="padding:20px 30px  0px 30px;"><a target="_blank" href="https://www.aliyun.com/minisite/goods?userCode=qya11txb" style="width:100%"><img src="https://img.alicdn.com/tfs/TB1qnR3R1L2gK0jSZFmXXc7iXXa-440-240.jpg" style="width:100%"></a></div> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/d2-crud-plus/guide/quickstart.html" aria-current="page" class="active sidebar-link">快速上手</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#关系" class="sidebar-link">关系</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#目录结构" class="sidebar-link">目录结构</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#运行示例" class="sidebar-link">运行示例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#基本示例运行" class="sidebar-link">基本示例运行</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#权限管理示例运行" class="sidebar-link">权限管理示例运行</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#调试运行" class="sidebar-link">调试运行</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#集成到你的项目中" class="sidebar-link">集成到你的项目中</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_1-安装" class="sidebar-link">1.安装</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_2-引入" class="sidebar-link">2.引入</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#d2-crud-x与d2-crud共同使用" class="sidebar-link">d2-crud-x与d2-crud共同使用</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_3-安装扩展插件" class="sidebar-link">3. 安装扩展插件</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_4-修改http响应拦截的返回结果" class="sidebar-link">4. 修改http响应拦截的返回结果</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#开发一个crud" class="sidebar-link">开发一个crud</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_1-crud-js" class="sidebar-link">1. crud.js</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_2-index-vue" class="sidebar-link">2. index.vue</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_3-api-js" class="sidebar-link">3.  api.js</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_4-添加路由和菜单" class="sidebar-link">4.  添加路由和菜单</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_5-看看效果" class="sidebar-link">5. 看看效果</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_6-d2-crud-plus-with-d2admin-starter" class="sidebar-link">6. d2-crud-plus-with-d2admin-starter</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_7-关于升级" class="sidebar-link">7. 关于升级</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/quickstart.html#_8-关闭百度分析" class="sidebar-link">8. 关闭百度分析</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/mixins.html" class="sidebar-link">核心逻辑</a></li><li><a href="/d2-crud-plus/guide/structure.html" class="sidebar-link">数据结构</a></li><li><a href="/d2-crud-plus/guide/column-type.html" class="sidebar-link">字段类型</a></li><li><a href="/d2-crud-plus/guide/types.html" class="sidebar-link">字段类型列表</a></li><li><a href="/d2-crud-plus/guide/custom-type.html" class="sidebar-link">自定义字段类型</a></li><li><a href="/d2-crud-plus/guide/component.html" class="sidebar-link">组件配置</a></li><li><a href="/d2-crud-plus/guide/slot.html" class="sidebar-link">slot自定义</a></li><li><a href="/d2-crud-plus/guide/extends.html" class="sidebar-link">自定义扩展</a></li><li><a href="/d2-crud-plus/guide/dict.html" class="sidebar-link">数据字典</a></li><li><a href="/d2-crud-plus/guide/nest-data.html" class="sidebar-link">多级数据</a></li><li><a href="/d2-crud-plus/guide/flat-data.html" class="sidebar-link">数据扁平化</a></li><li><a href="/d2-crud-plus/guide/data-export.html" class="sidebar-link">数据导出</a></li><li><a href="/d2-crud-plus/guide/line-edit.html" class="sidebar-link">行编辑</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/options.html" class="sidebar-link">crud配置项</a></li><li><a href="/d2-crud-plus/guide/expose.html" class="sidebar-link">暴露的方法</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>扩展</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>组件</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>附加功能</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/permission.html" class="sidebar-link">权限管理</a></li><li><a href="/d2-crud-plus/guide/generate.html" class="sidebar-link">代码生成</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>更多帮助</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/upgrade.html" class="sidebar-link">版本升级</a></li><li><a href="/d2-crud-plus/guide/breakingchange.html" class="sidebar-link">破坏性变更</a></li><li><a href="/d2-crud-plus/guide/upgradechange.html" class="sidebar-link">版本变更说明</a></li><li><a href="/d2-crud-plus/guide/questions.html" class="sidebar-link">常见问题</a></li><li><a href="/d2-crud-plus/guide/contact.html" class="sidebar-link">联系作者</a></li><li><a href="/d2-crud-plus/guide/donate.html" class="sidebar-link">捐赠</a></li><li><a href="/d2-crud-plus/guide/users.html" class="sidebar-link">他们在用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ChangeLog</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-x/CHANGELOG.html" class="sidebar-link">d2-crud-x</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus/CHANGELOG.html" class="sidebar-link">d2-crud-plus</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus-extends/CHANGELOG.html" class="sidebar-link">d2-crud-plus-extends</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus-example/CHANGELOG.html" class="sidebar-link">d2-crud-plus-example</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速上手"><a href="#快速上手" class="header-anchor">#</a> 快速上手</h1> <h2 id="关系"><a href="#关系" class="header-anchor">#</a> 关系</h2> <ul><li><code>d2-crud</code> : 官方的一个crud框架，使用起来相对繁琐，且已久不维护</li> <li><code>d2-crud-x</code> ：fork<code>d2-crud</code>改造而来，威力加强版（修复bug，增强功能）</li> <li><code>d2-crud-plus</code>: 辅助<code>d2-crud-x</code>或<code>d2-crud</code>，让它们使用起来更简单</li> <li><code>d2-crud-plus-example</code>: 以<code>d2-admin</code>为基础的示例工程，可以单独复制此项目作为你的启动项目</li> <li><code>d2-crud-plus-extends</code>: 实用的扩展组件（文件上传组件、地区选择组件、树形选择组件等）</li></ul> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <div class="language- extra-class"><pre class="language-text"><code>src
  |--packages    
    |-- d2-crud-plus               //基础工程
    |-- d2-crud-plus-example       //示例工程，进入到该目录下，npm run dev 即可运行示例
    |-- d2-crud-plus-extends       //扩展组件，觉得好用的话，也可以在其他项目中使用
    |-- d2-crud-x                  //d2-crud的修改加强版
</code></pre></div><h2 id="运行示例"><a href="#运行示例" class="header-anchor">#</a> 运行示例</h2> <h3 id="基本示例运行"><a href="#基本示例运行" class="header-anchor">#</a> 基本示例运行</h3> <p>执行如下命令即可运行示例项目</p> <div class="language-shell script extra-class"><pre class="language-shell"><code><span class="token function">git</span> clone https://gitee.com/greper/d2-crud-plus.git
<span class="token builtin class-name">cd</span> d2-crud-plus/packages/d2-crud-plus-example
<span class="token function">yarn</span> <span class="token function">install</span>  <span class="token comment">#或者npm install</span>
<span class="token function">npm</span> run dev
</code></pre></div><div class="language-shell script extra-class"><pre class="language-shell"><code><span class="token comment"># 如果您已全局设置使用淘宝镜像（可能淘宝镜像还没来得及同步最新版本）</span>
<span class="token comment"># 临时使用npmjs registry，即可安装最新版本</span>
<span class="token function">yarn</span> <span class="token function">add</span> d2-crud-x d2-crud-plus d2p-extends  --registry  http://registry.npmjs.org
<span class="token comment">#如果install太慢，使用淘宝镜像</span>
<span class="token function">yarn</span> <span class="token function">install</span> --registry  https://registry.npm.taobao.org
</code></pre></div><h3 id="权限管理示例运行"><a href="#权限管理示例运行" class="header-anchor">#</a> 权限管理示例运行</h3> <p>如果想要运行权限管理示例，执行如下命令</p> <div class="language-shell script extra-class"><pre class="language-shell"><code><span class="token function">npm</span> run dev:pm
</code></pre></div><p>注意：权限管理需要先运行后台，请查看<a href="/d2-crud-plus/guide/permission.html">权限管理帮助文档</a>获取更多信息</p> <h3 id="调试运行"><a href="#调试运行" class="header-anchor">#</a> 调试运行</h3> <p>如果想要修改<code>d2-crud-plus</code>或者<code>d2-crud-plus-extends</code>代码后在示例中热加载<br>
需要安装<code>lerna</code>，执行如下命令</p> <div class="language-shell script extra-class"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> lerna -g
<span class="token function">git</span> clone https://gitee.com/greper/d2-crud-plus.git
<span class="token builtin class-name">cd</span> d2-crud-plus
lerna <span class="token function">link</span>
<span class="token builtin class-name">cd</span> d2-crud-plus/packages/d2-crud-plus-example
<span class="token function">yarn</span> <span class="token function">install</span>  <span class="token comment">#或者npm install</span>
<span class="token function">npm</span> run dev
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>可以脱离d2-admin使用在其他项目中
运行以下命令可以启动一个无其他依赖示例</p> <div class="language- extra-class"><pre class="language-text"><code>cd /src/packages/d2-crud-plus
npm install
npm run dev
</code></pre></div></div> <h2 id="集成到你的项目中"><a href="#集成到你的项目中" class="header-anchor">#</a> 集成到你的项目中</h2> <p>在开始着手集成之前，建议您先运行示例项目，在里面<a href="#%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AAcrud">开发一个crud</a>试试</p> <h3 id="_1-安装"><a href="#_1-安装" class="header-anchor">#</a> 1.安装</h3> <div class="language-shell script extra-class"><pre class="language-shell"><code><span class="token comment">#使用npm</span>
<span class="token comment"># npm i @d2-project/d2-crud:2.0.5  -S </span>
<span class="token comment"># 【d2-crud官方已停止维护，推荐使用加强版d2-crud-x】</span>
<span class="token comment"># 使用d2-crud-x替换d2-crud【在官方基础上修复了bug，功能更强大】</span>
<span class="token function">npm</span> i  d2-crud-x  d2-crud-plus d2p-extends -S

<span class="token comment">#使用yarn</span>
<span class="token function">yarn</span> <span class="token function">add</span> d2-crud-x d2-crud-plus d2p-extends 

<span class="token comment">#使用cnpm</span>
cnpm i  d2-crud-x  d2-crud-plus d2p-extends -S

<span class="token comment"># 如果你已设置默认淘宝仓库，可能淘宝同步不及时</span>
<span class="token comment"># 如下配置临时切换npmjs仓库，可安装最新版本</span>
<span class="token function">npm</span> i  d2-crud-x  d2-crud-plus d2p-extends -S  --registry  http://registry.npmjs.org
<span class="token function">yarn</span> <span class="token function">add</span> d2-crud-x d2-crud-plus d2p-extends  --registry  http://registry.npmjs.org

</code></pre></div><h3 id="_2-引入"><a href="#_2-引入" class="header-anchor">#</a> 2.引入</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> d2CrudPlus <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d2-crud-plus'</span>
<span class="token comment">// import d2Crud from '@d2-projects/d2-crud' 【d2-crud官方已停止维护，推荐使用增强版d2-crud-x】</span>
<span class="token comment">// 推荐将d2-crud替换为d2-crud-x【使用方式基本与d2-crud一致】</span>
<span class="token keyword">import</span> d2CrudX <span class="token keyword">from</span> <span class="token string">'d2-crud-x'</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/service'</span>  <span class="token comment">//你项目http请求用的什么就引入什么</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>d2CrudX<span class="token punctuation">,</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'d2-crud-x'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//注册名称为d2-crud-x ，不传name则使用d2-crud作为标签名称</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>d2CrudPlus<span class="token punctuation">,</span> <span class="token punctuation">{</span>
 <span class="token comment">//获取数据字典的请求方法</span>
 <span class="token comment">//可在dict中配置getData方法覆盖此全局方法</span>
 <span class="token function">getRemoteDictFunc</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span>dict</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
   <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 用你项目中的http请求</span>
     url<span class="token punctuation">:</span> url<span class="token punctuation">,</span>
     method<span class="token punctuation">:</span> <span class="token string">'get'</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> ret<span class="token punctuation">.</span>data  <span class="token comment">//返回字典数组</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span>  
 <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token function">commonOption</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">//d2-crud option 全局配置，每个页面的crudOptions会以全局配置为基础进行覆盖</span>
   <span class="token keyword">return</span> <span class="token punctuation">{</span>
      format<span class="token punctuation">:</span> <span class="token punctuation">{</span>
       page<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">// page接口返回的数据结构配置，</span>
         request<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">// 请求参数</span>
           current<span class="token punctuation">:</span> <span class="token string">'current'</span><span class="token punctuation">,</span> <span class="token comment">//当前</span>
           size<span class="token punctuation">:</span> <span class="token string">'size'</span>
         <span class="token punctuation">}</span><span class="token punctuation">,</span>
         response<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">//返回结果</span>
           current<span class="token punctuation">:</span> <span class="token string">'current'</span><span class="token punctuation">,</span> <span class="token comment">// 当前页码 ret.data.current</span>
           size<span class="token punctuation">:</span> <span class="token string">'size'</span><span class="token punctuation">,</span> <span class="token comment">// 每页条数，ret.data.size, </span>
           <span class="token comment">//size: (data) =&gt; { return data.size }, //你也可以配置一个方法，自定义返回</span>
           total<span class="token punctuation">:</span> <span class="token string">'total'</span><span class="token punctuation">,</span> <span class="token comment">// 总记录数 ret.data.total</span>
           records<span class="token punctuation">:</span> <span class="token string">'records'</span> <span class="token comment">// 列表数组 ret.data.records</span>
         <span class="token punctuation">}</span>
       <span class="token punctuation">}</span>
     <span class="token punctuation">}</span><span class="token punctuation">,</span>
     formOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
       defaultSpan<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token comment">// 默认的表单 span</span>
     <span class="token punctuation">}</span><span class="token punctuation">,</span>
     options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
       height<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token comment">// 表格高度100%，此时d2-crud-x外部容器必须有高度, 使用toolbar必须设置</span>
     <span class="token punctuation">}</span><span class="token punctuation">,</span>
     pageOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
       compact<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否紧凑型页面</span>
     <span class="token punctuation">}</span><span class="token punctuation">,</span>
     viewOptions<span class="token punctuation">:</span><span class="token punctuation">{</span>
       disabled<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token comment">// 开启查看按钮</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p><a href="/d2-crud-plus/guide/structure.html">更多关于后台返回数据结构的配置说明</a></p> <h3 id="d2-crud-x与d2-crud共同使用"><a href="#d2-crud-x与d2-crud共同使用" class="header-anchor">#</a> d2-crud-x与d2-crud共同使用</h3> <p><code>d2-crud-x</code>与<code>d2-crud</code>并不冲突，可以在一个项目里面同时使用。<br>
如果你正在使用<code>d2-crud</code>，你可以在现有项目基础上使用<code>d2-crud-x</code>，并不会破坏以前的功能。</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">import</span> d2Crud <span class="token keyword">from</span> <span class="token string">'@d2-projects/d2-crud'</span>
 <span class="token keyword">import</span> d2CrudX <span class="token keyword">from</span> <span class="token string">'d2-crud-x'</span>
 Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>d2Crud<span class="token punctuation">)</span>
 Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>d2CrudX<span class="token punctuation">,</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'d2-crud-x'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//修改d2CrudX的标签名称</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d2-container</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用d2CrudX加强版 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d2-crud-x</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>d2Crud<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d2-crud-x</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token comment">&lt;!-- 使用官方&quot;弱鸡版&quot; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d2-crud</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>d2Crud<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d2-crud</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d2-container</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>随着d2-crud-x的功能越来越强大，已经无法直接兼容d2-crud。<br>
也就是说，以前用<code>d2-crud</code>的页面继续用<code>d2-crud</code>。<br>
新页面用<code>d2-crud-x</code>和<code>d2-crud-plus</code><br>
等以后有空了，再把以前的旧页面改成<code>d2-crud-x</code>（用<code>d2-crud-plus</code>开发很快的）</p></div> <h3 id="_3-安装扩展插件"><a href="#_3-安装扩展插件" class="header-anchor">#</a> 3. 安装扩展插件</h3> <p>如果你还需要文件上传、图片裁剪、富文本、地区选择器、树形选择器、图标选择器等组件<br>
那么你还需要安装对应的扩展插件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> D2pAreaSelector<span class="token punctuation">,</span> D2pFileUploader<span class="token punctuation">,</span> D2pIconSelector<span class="token punctuation">,</span> D2pTreeSelector<span class="token punctuation">,</span> D2pFullEditor<span class="token punctuation">,</span> D2pUploader<span class="token punctuation">,</span> D2pDemoExtend <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d2p-extends'</span> <span class="token comment">// 组件支持懒加载</span>

<span class="token comment">// 安装扩展插件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pTreeSelector<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pAreaSelector<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pIconSelector<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pFullEditor<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pFileUploader<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pDemoExtend<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>D2pUploader<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span> <span class="token comment">//文件上传有额外配置,请看下方链接</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>新插件在不断开发，你可以点击<a href="https://gitee.com/greper/d2-crud-plus/blob/master/packages/d2-crud-plus-example/src/business/install.js" target="_blank" rel="noopener noreferrer">示例中的插件引入参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
获取更多信息。</p> <h3 id="_4-修改http响应拦截的返回结果"><a href="#_4-修改http响应拦截的返回结果" class="header-anchor">#</a> 4. 修改http响应拦截的返回结果</h3> <p>如果你是集成到d2-admin，d2-admin中响应拦截器中成功的返回结果是<code>dataAxios.data</code>，code和msg是不会丢给下层处理的<br>
然而有些时候我们需要拿到<code>code</code>和<code>msg</code>做进一步判断和处理。<br>
比如直接把msg弹出显示给用户看。<br>
所以建议按如下修改响应拦截的返回结果，去掉<code>dataAxios.data</code>的<code>.data</code>，将<code>dataAxios</code>完整传递下去。</p> <div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>  <span class="token comment">// 响应拦截</span>
  service<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span>
        <span class="token comment">// 有 code 代表这是一个后端接口 可以进行进一步的判断</span>
        <span class="token keyword">switch</span> <span class="token punctuation">(</span>code<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">case</span> <span class="token number">0</span><span class="token punctuation">:</span>
            <span class="token comment">// [ 示例 ] code === 0 代表没有错误</span>
            <span class="token comment">// return dataAxios.data  //d2-admin的默认返回</span>
            <span class="token keyword">return</span> dataAxios <span class="token comment">// 去掉.data</span>
          <span class="token keyword">case</span> <span class="token string">'xxx'</span><span class="token punctuation">:</span>
            <span class="token comment">// [ 示例 ] 其它和后台约定的 code</span>
            <span class="token function">errorCreate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">[ code: xxx ] </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dataAxios<span class="token punctuation">.</span>msg<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>config<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
            <span class="token keyword">break</span>
          <span class="token keyword">default</span><span class="token punctuation">:</span>
            <span class="token comment">// 不是正确的 code</span>
            <span class="token function">errorCreate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dataAxios<span class="token punctuation">.</span>msg<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>config<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
            <span class="token keyword">break</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h4 id="_4-1-我已经改了"><a href="#_4-1-我已经改了" class="header-anchor">#</a> 4.1. 我已经改了</h4> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>修改之后，登录就会出问题，需要在<code>account.js</code>中增加如下代码</p></div> <div class="language-js extra-class"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br></div><pre class="language-js"><code>   <span class="token comment">// src/store/modules/d2admin/modules/account.js</span>
   <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token constant">SYS_USER_LOGIN</span><span class="token punctuation">(</span><span class="token punctuation">{</span> username<span class="token punctuation">,</span> password <span class="token punctuation">}</span><span class="token punctuation">)</span>
   res <span class="token operator">=</span> res<span class="token punctuation">.</span>data <span class="token comment">//增加这一句</span>
</code></pre></div><h4 id="_4-2-我不想改"><a href="#_4-2-我不想改" class="header-anchor">#</a> 4.2. 我不想改</h4> <p>当然，如果你不想动这块代码，你也可以在安装d2-crud-plus的时候增加如下配置即可正常使用d2-crud-plus</p> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>d2CrudPlus<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token punctuation">,</span>
  <span class="token function">commonOption</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//d2-crud option 全局设置</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      format<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">response</span> <span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 这里默认配置是  return ret.data</span>
          <span class="token keyword">return</span> ret
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>示例中所有的请求响应处理均基于<code>return dataAxios</code>的修改，当你复制示例中的响应处理代码时，需要记得将<code>ret.data</code>改成<code>ret</code>。</p></div> <h2 id="开发一个crud"><a href="#开发一个crud" class="header-anchor">#</a> 开发一个crud</h2> <p>通常在<a href="https://gitee.com/greper/d2-crud-plus/tree/master/packages/d2-crud-plus-example/src/business/modules/example/views/form" target="_blank" rel="noopener noreferrer">示例代码<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
中找一个合适的复制，再根据需求修改即可<br>
也可以根据数据库表以及模版<a href="/d2-crud-plus/guide/generate.html">自动生成</a></p> <h3 id="_1-crud-js"><a href="#_1-crud-js" class="header-anchor">#</a> 1. crud.js</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">crudOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">vm</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span> <span class="token comment">// vm即this</span>
   <span class="token keyword">return</span> <span class="token punctuation">{</span>
     columns<span class="token punctuation">:</span> <span class="token punctuation">[</span>
       <span class="token punctuation">{</span>
         title<span class="token punctuation">:</span> <span class="token string">'日期'</span><span class="token punctuation">,</span>
         key<span class="token punctuation">:</span> <span class="token string">'createDate'</span><span class="token punctuation">,</span>
         sortable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 
         type<span class="token punctuation">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span> <span class="token comment">//字段类型为时间选择器datepicker,根据类型可自动生成默认配置</span>
         search<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token comment">//查询配置，默认启用查询</span>
           disabled<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">//【可选】true禁止查询,默认为false</span>
         <span class="token punctuation">}</span><span class="token punctuation">,</span>
         form<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token comment">//form表单的配置</span>
           disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//禁止添加输入与修改输入【可选】默认false</span>
         <span class="token punctuation">}</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token punctuation">{</span>
         title<span class="token punctuation">:</span> <span class="token string">'状态'</span><span class="token punctuation">,</span>
         key<span class="token punctuation">:</span> <span class="token string">'status'</span><span class="token punctuation">,</span>
         search<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">//启用查询</span>
         type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token comment">//字段类型为选择框</span>
         form<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">//配置添加和编辑，根据form的配置自动生成addTemplate和editTemplate</span>
           rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token comment">//【可选】添加和修改时的校验规则，不配置则不校验</span>
             <span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'请选择状态'</span> <span class="token punctuation">}</span>
           <span class="token punctuation">]</span>
         <span class="token punctuation">}</span><span class="token punctuation">,</span>
         dict<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">//数据字典配置</span>
           url<span class="token punctuation">:</span> <span class="token string">'/api/dicts/StatusEnum'</span> <span class="token comment">//远程获取数据字典</span>
         <span class="token punctuation">}</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token punctuation">{</span>
         title<span class="token punctuation">:</span> <span class="token string">'地区'</span><span class="token punctuation">,</span> 
         key<span class="token punctuation">:</span> <span class="token string">'province'</span><span class="token punctuation">,</span> 
         search<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">//启用查询</span>
         type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token comment">//字段类型为选择框</span>
         form<span class="token punctuation">:</span> <span class="token punctuation">{</span>
           rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'请选择地区'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
           component<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">//添加和修改时form表单的组件，支持任何v-model组件</span>
             props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">//配置自定义组件的属性</span>
               filterable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//可过滤选择项</span>
               multiple<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//支持多选</span>
               clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">//可清除</span>
             <span class="token punctuation">}</span>
           <span class="token punctuation">}</span>
         <span class="token punctuation">}</span><span class="token punctuation">,</span>
         dict<span class="token punctuation">:</span> <span class="token punctuation">{</span>  <span class="token comment">//本地数据字典</span>
           data<span class="token punctuation">:</span> <span class="token punctuation">[</span>
             <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'sz'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'深圳'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
             <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'gz'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'广州'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
             <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'wh'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'武汉'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
             <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'sh'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'上海'</span> <span class="token punctuation">}</span>
           <span class="token punctuation">]</span>
         <span class="token punctuation">}</span>
       <span class="token punctuation">}</span>
     <span class="token punctuation">]</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-index-vue"><a href="#_2-index-vue" class="header-anchor">#</a> 2. index.vue</h3> <p>crud页面内容都一样，通常直接复制即可</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>请不要修改ref的值</p></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d2-container</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{'page-compact':crud.pageOptions.compact}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>测试页面<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d2-crud-x</span>
        <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>d2Crud<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_crudProps<span class="token punctuation">&quot;</span></span> 
        <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_crudListeners<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 自动绑定参数与事件 --&gt;</span>
        <span class="token comment">&lt;!-- 包含详细参数见：https://gitee.com/greper/d2-crud-plus/blob/master/packages/d2-crud-plus/src/lib/mixins/crud.js#L164--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>crud-search</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>crud.searchOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleSearch<span class="token punctuation">&quot;</span></span>  <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button-group</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>addRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>el-icon-plus<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span> 新增<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button-group</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>crud-toolbar</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_crudToolbarProps<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_crudToolbarListeners<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d2-crud-x</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d2-container</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>



<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> crudOptions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./crud'</span> <span class="token comment">//上文的crudOptions配置</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> d2CrudPlus <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d2-crud-plus'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AddObj<span class="token punctuation">,</span> GetList<span class="token punctuation">,</span> UpdateObj<span class="token punctuation">,</span> DelObj <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./api'</span> <span class="token comment">//查询添加修改删除的http请求接口</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'testPage'</span><span class="token punctuation">,</span>
  mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>d2CrudPlus<span class="token punctuation">.</span>crud<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 最核心部分，继承d2CrudPlus.crud</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">getCrudOptions</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">crudOptions</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">pageRequest</span> <span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">GetList</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 数据请求</span>
    <span class="token function">addRequest</span> <span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">AddObj</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 添加请求</span>
    <span class="token function">updateRequest</span> <span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token function">UpdateObj</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 修改请求</span>
    <span class="token function">delRequest</span> <span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token function">DelObj</span><span class="token punctuation">(</span>row<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token comment">// 删除请求</span>
    <span class="token operator">...</span><span class="token comment">// 还可以覆盖d2CrudPlus.crud中的方法来实现你的定制化需求</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_3-api-js"><a href="#_3-api-js" class="header-anchor">#</a> 3.  api.js</h3> <p>实现添删改查请求接口，通常复制，改一下url即可，你也可以自行增加方法，用于业务需求</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//import request from '@/business/api/request.mock' 示例当中用的是模拟数据</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/service'</span> <span class="token comment">//改成这个请求真实后端</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">GetList</span> <span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'/test/page'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    params<span class="token punctuation">:</span> query
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">AddObj</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'/test/add'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> obj
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">UpdateObj</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'/test/update'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> obj
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">DelObj</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'/test/delete'</span><span class="token punctuation">,</span>
    method<span class="token punctuation">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    params<span class="token punctuation">:</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre></div><p>以下为本案例示例数据</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>date<span class="token punctuation">:</span> <span class="token string">'2016-05-02'</span><span class="token punctuation">,</span>status<span class="token punctuation">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> province<span class="token punctuation">:</span> <span class="token string">'sz'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>date<span class="token punctuation">:</span> <span class="token string">'2016-05-04'</span><span class="token punctuation">,</span>status<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>province<span class="token punctuation">:</span> <span class="token string">'sh,sz'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>date<span class="token punctuation">:</span> <span class="token number">2232433534511</span><span class="token punctuation">,</span>status<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> province<span class="token punctuation">:</span> <span class="token string">'gz'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment">//支持各种时间类型</span>
    <span class="token punctuation">{</span>date<span class="token punctuation">:</span> <span class="token string">'2016-05-03'</span><span class="token punctuation">,</span>status<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>province<span class="token punctuation">:</span> <span class="token string">'wh,gz'</span><span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>示例中的数据为mock数据，实际开发中需要替换为你的真实后端接口<br>
如果后端打算使用java的话，你可以参考<a href="https://gitee.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer">配套java后端<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br>
以上代码还可以通过<a href="/d2-crud-plus/guide/generate.html">代码生成</a></p></div> <h3 id="_4-添加路由和菜单"><a href="#_4-添加路由和菜单" class="header-anchor">#</a> 4.  添加路由和菜单</h3> <p>如果是在example项目中添加新crud，则在如下文件中添加路由和菜单。<br> <code>packages/d2-crud-plus-example/src/business/modules/example/index.js</code></p> <p>如果是你自己的d2-admin项目，请参考<a href="https://d2.pub/zh/doc/d2-admin/router/#%E6%95%B0%E6%8D%AE" target="_blank" rel="noopener noreferrer">路由配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，<a href="https://d2.pub/zh/doc/d2-admin/menu/#%E6%95%B0%E6%8D%AE%E6%BA%90" target="_blank" rel="noopener noreferrer">菜单配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_5-看看效果"><a href="#_5-看看效果" class="header-anchor">#</a> 5. 看看效果</h3> <p><img src="https://gitee.com/greper/d2-crud-plus/raw/master/packages/d2-crud-plus/doc/image/list.png" alt=""></p> <p><img src="https://gitee.com/greper/d2-crud-plus/raw/master/packages/d2-crud-plus/doc/image/add.png" alt=""></p> <p><img src="https://gitee.com/greper/d2-crud-plus/raw/master/packages/d2-crud-plus/doc/image/edit.png" alt=""></p> <h3 id="_6-d2-crud-plus-with-d2admin-starter"><a href="#_6-d2-crud-plus-with-d2admin-starter" class="header-anchor">#</a> 6. d2-crud-plus-with-d2admin-starter</h3> <p>觉得自己集成挺麻烦的？<br>
这里已经准备了一个<code>d2-crud-plus</code>与<code>d2-admin</code>集成好了的启动项目<br> <a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer">d2-crud-plus-with-d2admin-starter<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer">d2-crud-plus-with-d2admin-starter-带权限版<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>参考文章：<a href="https://www.jianshu.com/p/cdccadcf6ce9" target="_blank" rel="noopener noreferrer">如何从零开始搭建一套带权限的后台管理系统<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_7-关于升级"><a href="#_7-关于升级" class="header-anchor">#</a> 7. 关于升级</h3> <p>你可能还想知道<a href="/d2-crud-plus/guide/upgrade.html">如何升级</a></p> <h3 id="_8-关闭百度分析"><a href="#_8-关闭百度分析" class="header-anchor">#</a> 8. 关闭百度分析</h3> <p>正式环境部署记得把百度分析关掉，或者改成你们自己的百度统计</p> <p>方式一：修改.env</p> <div class="language- extra-class"><pre class="language-text"><code>//关闭百度分析
VUE_APP_BAIDU_TRACE=false
</code></pre></div><p>方式二：搜索<code>_hmt</code>把相关代码删除掉</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/greper/d2-crud-plus/edit/master//docs/guide/quickstart.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/1/19 下午3:31:32</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/d2-crud-plus/guide/" class="prev router-link-active">
        介绍
      </a></span> <span class="next"><a href="/d2-crud-plus/guide/mixins.html">
        核心逻辑
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/d2-crud-plus/assets/js/app.cf559687.js" defer></script><script src="/d2-crud-plus/assets/js/2.40e3d83c.js" defer></script><script src="/d2-crud-plus/assets/js/7.20165752.js" defer></script><script src="/d2-crud-plus/assets/js/94.bfb96693.js" defer></script>
  </body>
</html>
